import { StyleSheet, Text, View, Image, Pressable } from 'react-native';
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useRoute } from '@react-navigation/native';
import { NavBarHeader, ActionSheet } from '~/components';
import { px2dp, scale } from '~/utils/px2dp';
import { observer, webSocketStore } from '~/store';
import { getDeviceCoInterval, setDeviceCoInterval } from '~/utils/socketMessenger';

export default observer(() => {
    const router = useRoute<any>();
    const { t } = useTranslation();
    const { device_sn } = router.params || {};
    let { coInterval } = webSocketStore;
    const [visible, setVisible] = useState(false);
    const arrayData = [
        { id: 1, title: '1', onPress: () => setTime(1) },
        { id: 2, title: '3', onPress: () => setTime(3) },
        { id: 2, title: '6', onPress: () => setTime(6) },
        { id: 2, title: '9', onPress: () => setTime(9) },
    ];

    const getData = () => {
        getDeviceCoInterval(device_sn, { sn_id: device_sn, set_state: 0 });
    };
    const setTime = (res) => {
        setDeviceCoInterval(device_sn, { sn_id: device_sn, set_state: 1, data: parseInt(res) });
        setTimeout(() => {
            getData();
        }, 500);
        setVisible(false);
    };

    useEffect(() => {
        getData();
    }, []);

    return (
        <View style={styles.container}>
            <NavBarHeader title={t('SmokeSettings.title')} />
            <Pressable
                style={styles.listItem}
                onPress={() => {
                    if (coInterval == 0) {
                        setTime(0);
                    } else {
                        setTime(3);
                    }
                }}>
                <Text style={styles.title}>{t('SmokeSettings.t1')}</Text>
                <Image
                    resizeMode="contain"
                    source={{
                        uri: `https://bjy-dev.oss-cn-shenzhen.aliyuncs.com/xcx/alarm_clock/${
                            coInterval !== 0 ? 'open.png' : 'shut.png'
                        }`,
                    }}
                    style={styles.switchIcon}
                />
            </Pressable>
            {coInterval !== 0 && (
                <Pressable style={styles.listItem} onPress={() => setVisible(true)}>
                    <Text style={styles.title}>{t('SmokeSettings.t2')}</Text>
                    <Text>{coInterval}s</Text>
                </Pressable>
            )}
            <ActionSheet visible={visible} onToggleVisible={() => setVisible(false)} options={arrayData} />
        </View>
    );
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    listItem: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        backgroundColor: '#fff',
        marginHorizontal: px2dp(32),
        marginTop: px2dp(32),
        padding: px2dp(24),
        borderRadius: px2dp(12),
    },
    title: {
        color: '#000',
        fontSize: scale(30),
        fontWeight: 'bold',
    },
    switchIcon: {
        width: px2dp(80),
        height: px2dp(52),
    },
});
